<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>聊天窗口</title>
    <link href="__PUBLIC__/mui/css/mui.min.css" rel="stylesheet" />
    <link href="__PUBLIC__/css/chat.css" rel="stylesheet" />
    <script src="__PUBLIC__/mui/js/mui.min.js"></script>
    <script src="__PUBLIC__/js/jquery-3.0.0.min.js"></script>
    <script>
        /***************已弃用******************/
//        //点击退出按钮,把当前userid的会话状态改为0(下线状态)
//        var oldback = mui.back;
//        mui.back = function() {
//            var back_url = '/Home/Chat/update_useronline/userid/'+receiverid+'/kefuid/'+userid+'/user_type/kefu_type';
//            $.get(back_url,function(vs){});
//            oldback();
//        }
    </script>
</head>

<body >
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">与客户(<?php echo $receiver_name; ?>)聊天窗口</h1>
</header>
<pre id='h'></pre>
<div class="mui-content" id="content">
    <!--消息最后历史时间-->
    <!--<p class="chat-history-date"><?php echo date('Y-m-d H:i:s',time());?></p>-->
    <!--接收文本消息-->
    <?php foreach($info as $k=>$v){
        if($v['send_id'] == $userid){
            $class = "class='chat-sender'";
            $img = $user_img;
        }else{
            $class = "class='chat-receiver'";
            $img = $receiver_img;
        }
    ?>
    <div <?php echo $class; ?>>
        <div class="chat-avatar">
            <img src="<?php echo $img; ?>">
        </div>
        <div class="chat-content">
            <div class="chat-triangle"></div>
            <span><?php echo $v['connect']; ?></span>
        </div>
    </div>
    <?php } ?>
</div>
<footer>
    <div class="footer-left">
        <i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
    </div>
    <div class="footer-center">
        <textarea id='msg-text' type="text" class='input-text'></textarea>
    </div>
    <label for="" class="footer-right" style="">
        <button id="add_re_msg" style="padding:7px">发送</button >
    </label>
</footer>
</body>
<script>
    var rmaxid = {$rmaxid};  //初始化当前客服和当前客户聊天最大的ID
    var userid = '{$userid}';  //当前客服ID
    var user_img = '{$user_img}';//当前客服头像
    var receiverid = '{$receiverid}'; // 当前客户ID
    var receiner_img = '{$receiver_img}'; //当前客户头像

    //ajax获取最新消息
    function getmsg(){
        var getmsg_url = '__CONTROLLER__/ajax_getmsg/userid/'+userid+'/receiverid/'+receiverid+'/rmaxid/'+rmaxid;
        $.get(getmsg_url,function(vs){
            // console.log(vs);return;
            rmaxid = vs.rmaxid;
            var list = vs.info;
            if(list != false){
                var html = '';
                $(list).each(function(k,v){
                    html += '<div class="chat-receiver">';
                    html += '<div class="chat-avatar">';
                    html += '<img src="'+receiner_img+'">';
                    html += '</div>';
                    html += '<div class="chat-content">';
                    html += '<div class="chat-triangle"></div>';
                    html += '<span>'+v.connect+'</span>';
                    html += '</div>';
                    html += '</div>';
                });
                $('.mui-content').append(html);
                set_scrollTop();      //设置卷起高度
            }
        })
    }

    //发送消息并添加到数据库
    function inster_receiver() {
        //alert(userid+'--'+receiverid);return;
        var msg = $('#msg-text').val();
        $.ajax({
            url: '/Home/ReceiverMsg/add_receiver_msg',
            type: 'post',
            data: {userid: userid, receiverid: receiverid, msg: msg},
            success: function (data) {
                if (data == 'ok') {
                    var sender_html = '<div class="chat-sender"><div class="chat-avatar"><img src="' + user_img + '"></div><div class="chat-content"><div class="chat-triangle"></div><span>' + msg + '</span></div></div>';
                    $('.mui-content').append(sender_html);
                    $('#msg-text').val('');
                    set_scrollTop();       //设置卷起高度
                    //每次发表一条消息就判断客户是否在线,如果不在线就推送一条消息
                    var getonline_url = '/Home/Chat/ajax_getuseridonline/userid/' + receiverid + '/kefuid/' + userid + '/user_type/user_type';
                    $.get(getonline_url, function (vs) {
                        //alert(vs);return;
                        if (vs == 0) {
                            //推送消息
                            fs_msg(receiverid, userid);
                            //给当前客服与客户的聊天状态表中的客户未读消息+1
                            addto_wd_num(receiverid, userid)
                        }
                    });
                } else {
                    alert('消息发送失败');
                }
            }
        })
    };

    //推送信息
    function fs_msg(receiverid,userid){
        var fsmsg_url = '/Home/Chat/fsmsg/user_id/'+receiverid+'/kefu_id/'+userid+'/user_type/yonghu';
        $.get(fsmsg_url,function(data){
            //alert(data);
        });
    }

    //追加未读消息
    function addto_wd_num(receiverid, userid){
        $.get('/Home/Online/addto_user_wd_num/userid/'+receiverid+'/kefuid/'+userid,function(c){
            //alert(c);
        })

    }

    //设置显示信息框卷起高度
    function set_scrollTop(){
        var content = document.getElementById('content');
        content.scrollTop = content.scrollHeight;
    }

    mui.ready(function(){
        //alert(userid+'--'+receiverid);return;
        set_scrollTop();        //设置卷起高度
        //给发送按钮绑定事件
        var add_re_msg = document.getElementById('add_re_msg');
        add_re_msg.addEventListener('tap',function(){
            inster_receiver();
        })
        //getmsg();
        setInterval('getmsg()',5000);

    });

</script>

</html>